
/* eslint-disable */

Vue.use(window['vue-js-modal'].default);
var PAGE_SIZE = 12;
new Vue({

    data: function(){
        return {
             //视频类别
            categories: [],
            active_index: 0,
            loading:false,
            cases:[],
            picture: '',
            description: '',
            current_category_id: 0,
            // active_index: 0,
        }
    },

    filters:{
    textOverflow: function(value, length){
           var len = length || 43;
            if(value && value.length > len ){
                return value.substring(0,len) + ' ...';
            }else{
                return value;
            }
        }
    },

    methods:{

        /**
         * 打开模态框
         * @param {*} picture_url 
         * @param {*} description 
         */
        openModal(picture_url, description) {
            this.picture = picture_url;
            this.description = description;
            this.$modal.show('picture-modal');
        },

        getArticleTitle: function (video) {
            if (document.getElementsByTagName('html')[0].lang === 'zh') {
                return video.name;
            }else{
                return video.english_title;
            }
        },

        fetchCases:function(form){
            var self = this;
            self.loading = true;
            self.$http.get('/api/web-page/case', {params: form})
            .then(function(response){
                if( response.data.code !== 0 ){
                    throw new Error( response.data.message );
                }
                self.cases = response.data.cases_paginate.data;
                self.paginate = response.data.cases_paginate;
                
            }).catch(function(error){
                // alert(error.message);
                console.log(error.message);
            }).then(function(){
                self.loading=false;
            })

        },

        /**
         *  切换分类
         *  @param {string} tagName
         */
        changeCategory: function changeCategory(case_tag_id, index){
            this.active_index = index;
            this.current_category_id = case_tag_id;
            this.fetchCases({
                case_tag_id:case_tag_id,
                page:1,
                per_page: PAGE_SIZE,
            })
        },

        changePage:function(page){
            this.fetchCases({
                case_tag_id: this.current_category_id,
                per_page: PAGE_SIZE,
                page:page,
            });
        },

        fetchCategories: function fetchCategories(){
            var self = this;
            return this.$http.get('/api/web-page/case/create')
                .then(function(response){
                    if (response.data.code !==0) {
                        throw new Error(response.data.error);
                    } else {
                        self.categories = response.data.tags || [];
                        return self.categories;
                    }
                }).catch(function(error){
                    console.log(error.message);
                    // alert(error.message);
                })
        },

        getNavigationItemClass: function (index){
            return {
                active: this.active_index === index,
                ['item_'+index]: true,
            }
        },

        calculateActiveIndex(){
            var hash = location.hash.replace(/^#/,'');
            var categoryMap = {
                'beauty-mirror': 1,
                'all-start': 2,
                'technology': 3
            }
            return categoryMap[hash] || 0;
        },

        findCurrentCategoryId: function(){
            this.active_index = this.calculateActiveIndex();
            var category = this.categories[this.active_index];
            return category.id;
        },

        initPageData: function(){
            var self = this;
            this.fetchCategories()
                .then(function(categories){
                    if (categories) {
                        self.current_category_id = self.findCurrentCategoryId();
                        self.fetchCases({
                            case_tag_id: self.current_category_id,
                            page: 1,
                            per_page: PAGE_SIZE,
                        });
                    }
                })
        }

    },

    mounted:function(){
        this.initPageData();
        var self = this;
        window.addEventListener('hashchange', function(){
            self.current_category_id = self.findCurrentCategoryId();
            self.fetchCases({
                case_tag_id: self.current_category_id,
                page: 1,
                per_page: PAGE_SIZE,
            });
        })
    },

    components:{
        bymPagination:bymPagination
    }

}).$mount("#case");


